package com.tencent.compose.sample.mainpage.material3

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.material.DropdownMenu
import androidx.compose.material.DropdownMenuItem
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.ExposedDropdownMenuDefaults.TrailingIcon
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import org.jetbrains.compose.ui.tooling.preview.Preview


@OptIn(ExperimentalMaterialApi::class)
@Composable
@Preview()
internal fun CustomDropdownMenu(
    // 移除 expanded 和 onExpandedChange，其他参数按需保留
) {
    // 组件内部管理展开状态
    var expanded by remember { mutableStateOf(false) }

    // 点击时切换内部状态（无需外部传入回调）
    val toggleExpanded = { expanded = !expanded }

    // 主体内容容器（可点击区域）
    Box(modifier = Modifier.clickable { toggleExpanded() }) {
        Text("选择选项")

        // 调用 TrailingIcon，直接使用内部状态和切换逻辑
        TrailingIcon(
            expanded = expanded,
            onIconClick = toggleExpanded // 点击图标也切换内部状态
        )
    }

    // 下拉菜单（根据内部 expanded 状态显示/隐藏）
    if (expanded) {
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false } // 点击外部关闭菜单
        ) {
            DropdownMenuItem(onClick = { /* 选项1逻辑 */ }) {
                Text("选项1")
            }
            DropdownMenuItem(onClick = { /* 选项2逻辑 */ }) {
                Text("选项2")
            }
        }
    }
}